<script lang="ts" setup>
import { getMenuAll, assignMenu } from "../service";
import { IResponseData } from "@/@types/utils.request";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	id: {
		type: Number,
		default: 0,
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: boolean): void;
}>();
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});

const adminId = computed(() => props.id);

// 所有权限列表
const getAll = async () => {
	try {
		checkList.value = [];
		const response: IResponseData<any> = await getMenuAll({ roleId: adminId.value });
		const { code, msg, data } = response;
		if (code === 0) {
			listData.value = data.allPermissions;
			// 获取最底层子级节点
			const list = data.allPermissions.flatMap((item: { children: any[] }) => {
				if (item.children.length > 0) {
					return item.children.flatMap((v: any) => (v.children.length > 0 ? v.children : v));
				}
				return item;
			});
			// 最底层子级节点匹配
			checkList.value = data.ownPermissions.filter((item: any) => {
				return list.find((v: { id: any }) => v.id === item);
			});
			console.log(checkList.value);
		} else {
			ElMessage({
				message: msg,
				type: "error",
			});
		}
	} catch (error: any) {
		console.log(error);
	}
};

const defaultProps = {
	children: "children",
	label: "name",
};
const getRole = () => {
	getAll();
};
// tree选择
const listData = ref<any>([]);
const checkList = ref<number[]>([]);
const halfCheckedList = ref<number[]>([]);

const handleNodeClick = (checkedNodes: any, checkedKeys: any) => {
	// 半选中状态和选中状态节点数组
	console.log(checkedNodes, checkedKeys, checkedKeys.checkedKeys);
	halfCheckedList.value = checkedKeys.halfCheckedKeys;
	checkList.value = checkedKeys.checkedKeys;
};

const onCancel = () => {
	ElMessageBox.confirm("您所编辑的内容还未保存，此时退出会导致修改内容失效，确定要退出吗？", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		emit("update:modelValue", false);
	});
};
const onConfirmm = async () => {
	try {
		const response: IResponseData<any> = await assignMenu({
			roleId: adminId.value,
			permissionIds: [...checkList.value, ...halfCheckedList.value],
		});
		const { code, msg } = response;
		if (code === 0) {
			ElMessage({
				message: msg,
				type: "success",
			});
			emit("update:modelValue", false);
		} else {
			ElMessage({
				message: msg,
				type: "error",
			});
		}
	} catch (error: any) {
		console.log(error);
	}
};
</script>
<template>
	<el-dialog v-model="visible" title="分配权限" width="700px" @open="getRole" :before-close="onCancel">
		<el-tree
			:data="listData"
			show-checkbox
			node-key="id"
			empty-text="暂无数据"
			default-expand-all
			:expand-on-click-node="false"
			:default-checked-keys="checkList"
			:props="defaultProps"
			@check="handleNodeClick"
		/>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" @click="onConfirmm"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
